<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/favicon.ico">
		<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/justified-nav/">

		<title>在线书城首页</title>

		<!-- Bootstrap core CSS -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/css/bootstrap.min.css" rel="stylesheet">

		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/css/ie10-viewport-bug-workaround.css"
		 rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/examples/justified-nav/justified-nav.css" rel="stylesheet">

		<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
		<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie-emulation-modes-warning.js"></script>

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<div class="container">

			<!-- The justified navigation menu is meant for single line per list item.
           Multiple lines will require custom code not provided by Bootstrap. -->
			<div class="masthead">
				<div class="row">
					<div class="col-md-6">
						<h3 class="text-muted">在线书城</h3>
						<h4 class="text-muted">bookstore.com</h4>
					</div>
					<div class="col-md-6">
						<div style="float: right;">
							<nav>
								<ul class="nav nav-pills">
									<li><a href="./login.html">我的账户</a></li>
									<li><a href="./product_cart.html">购物车</a></li>

									<li><a href="./register.html">新用户注册</a></li>
									<li><a href="#">帮助中心</a></li>
								</ul>
							</nav>
						</div>
						<div class="row">
							<div class="col-lg-6">
							</div><!-- /.col-lg-6 -->
							<div class="col-lg-6">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="请输入图书名称">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button">搜索</button>
									</span>
								</div><!-- /input-group -->
							</div><!-- /.col-lg-6 -->
						</div><!-- /.row -->
					</div>
				</div>


				<nav>
					<ul class="nav nav-justified">
						<li class="active"><a href="./index.html">首页</a></li>
						<li><a href="#">文学</a></li>
						<li><a href="#">经管</a></li>
						<li><a href="#">励志</a></li>
						<li><a href="#">艺术</a></li>
						<li><a href="#">少儿</a></li>
						<li><a href="#">生活百科</a></li>
						<li><a href="./product_list.html">全部分类</a></li>
					</ul>
				</nav>
			</div>

			<!-- Jumbotron -->
			<div class="jumbotron">
				<h1>欢迎访问在线书城！</h1>
				<p class="lead">本周特价书籍活动！活动书籍7折！</p>
				<p><a class="btn btn-lg btn-success" href="#" role="button">点击了解</a></p>
			</div>
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
					<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
					<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
				</ol>
				<div class="carousel-inner" role="listbox">
					<div class="item">
						<img alt="First slide [1140x500]" src="./productImg/1.jpg" data-holder-rendered="true">
					</div>
					<div class="item">
						<img alt="Second slide [1140x500]" src="./productImg/2.jpg" data-holder-rendered="true">
					</div>
					<div class="item active">
						<img alt="Third slide [1140x500]" src="./productImg/3.jpg" data-holder-rendered="true">
					</div>
				</div>
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>

			<!-- Example row of columns -->
			<div class="row">
				<div class="col-lg-4">
					<h2>公告板</h2>
					<p class="text-danger">升级公告</p>
					<p>尊敬的在线书城用户</p>
					<p>在线书城将在本月20日进行系统升级优化！</p>
					<p><a class="btn btn-primary" href="#" role="button">查看公告详情 &raquo;</a></p>
				</div>
				<div class="col-lg-8">
					<h2>本周热卖</h2>
					<div class="col-lg-3" align="center">
						<a href="./client/product_detail.html">
							<img src="./productImg/dayongxiaohua.jpg" style="width: 150px; height: 150px;" alt="..." class="img-thumbnail">
							<h4>
								<p>大勇和小花</p>
							</h4>
							<p>10￥</p>
						</a>
					</div>
					<div class="col-lg-3" align="center">
						<a href="./client/product_detail.html">
							<img src="./productImg/dayongxiaohua.jpg" style="width: 150px; height: 150px;" alt="..." class="img-thumbnail">
							<h4>
								<p>大勇和小花</p>
							</h4>
							<p>10￥</p>
						</a>
					</div>
					<div class="col-lg-3" align="center">
						<a href="./client/product_detail.html">
							<img src="./productImg/dayongxiaohua.jpg" style="width: 150px; height: 150px;" alt="..." class="img-thumbnail">
							<h4>
								<p>大勇和小花</p>
							</h4>
							<p>10￥</p>
						</a>
					</div>
					<div class="col-lg-3" align="center">
						<a href="./client/product_detail.html">
							<img src="./productImg/dayongxiaohua.jpg" style="width: 150px; height: 150px;" alt="..." class="img-thumbnail">
							<h4>
								<p>大勇和小花</p>
							</h4>
							<p>10￥</p>
						</a>
					</div>
				</div>
			</div>

			<!-- Site footer -->
			<footer class="footer">
				<p>&copy; 在线书城 版权所有</p>
			</footer>

		</div> <!-- /container -->

		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		 crossorigin="anonymous"></script>
		<script>
			window.jQuery || document.write(
				'<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/vendor/jquery.min.js"><\/script>'
			)
		</script>
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/docs.min.js"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie10-viewport-bug-workaround.js"></script>


	</body>
</html>
